import MyDate from "./MyDate/MyDate";
import './LogItem.css'
import Card from "../../UI/Card/Card";
import ConfirmModel from "../../UI/ConfirmModel/ConfirmModel"
import { useState } from "react";


const Item = (props) => {
  const [showConfirm, setShowConfirm] = useState(false)
  //删除弹窗
  const deleteItemHandler = () => {
    setShowConfirm(true)
    
  } 
  const cancelDelete = () => {
    setShowConfirm(false)
  }
  return ( 
    <Card className="item">
        {showConfirm && <ConfirmModel
            confirmText={"确认删除吗"}
            confirmDelete={props.deleteLogById}
            cancelDelete={cancelDelete}
        />}
        <MyDate date={props.date}/>
        <div className="content">
            <h2 className="desc">{props.desc}</h2>
            <p className="time">{props.time}分钟</p>
        </div>

        <div>
          <div className="delete" onClick={deleteItemHandler}>×</div>
        </div>
    </Card>
  )
  
}

export default Item;
